<template>
  <div>
    <!--    模糊搜索框区域-->
    <el-card class="box-card" style="height: 70px">
      <el-form
        :inline="true"
        :model="searchForm"
        ref="searchForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="用户名" prop="patientName" placeholder="请输入用户名">
          <el-input
            size="small"
            type="text"
            v-model="searchForm.patientName"
            autocomplete="off"
          ></el-input>
        </el-form-item>

        <el-form-item label="退款编号" prop="refundCode" placholder="请输入退款编号">
          <el-input
            size="small"
            type="text"
            v-model="searchForm.refundCode"
            autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" size="small" @click="search">搜索</el-button>
          <el-button @click="resetForm('searchForm')">重置</el-button>
          <el-button size="small" type="danger" @click="exportExcel">导出</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!--    表格区域-->
    <el-card class="box-card">
      <el-table :data="orderList" style="width: 100%">
        <!-- 复选框,默认会有事件handleSelectionChange -->

        <el-table-column
          prop="orderId"
          width="100"
          label="订单号">
        </el-table-column>
        <el-table-column
          prop="refundCode"
          width="150"
          label="退款编号">
        </el-table-column>
        <el-table-column
          prop="patientName"
          width="150"
          label="患者姓名">
        </el-table-column>
        <el-table-column
          prop="phone"
          width="150"
          label="手机号">
        </el-table-column>
        <el-table-column
          prop="source"
          width="100"
          label="来源">
        </el-table-column>
        <el-table-column
          prop="refundAmount"
          width="100"
          label="退款金额">
        </el-table-column>
        <el-table-column
          prop="applyTime"
          width="180"
          label="申请时间">
        </el-table-column>

        <el-table-column
          prop="reviewer"
          width="100"
          label="审核人">
        </el-table-column>

        <el-table-column
          prop="reviewTime"
          width="180"
          label="审核时间">

        </el-table-column>

        <el-table-column prop="reviewStatus" width="120" label="审核状态">
          <template slot-scope="scope">
            <span :style="getReviewStatusStyle(scope.row.reviewStatus)">
              {{ scope.row.reviewStatus }}
            </span>
          </template>
        </el-table-column>


        <el-table-column width="100" label="操作">
          <template slot-scope="scope">
            <!-- 根据审核状态条件渲染审核/查看按钮 -->
            <el-button
              v-if="scope.row.reviewStatus === '待审核'"
              size="mini"
              type="text"
              @click="openReviewDialog(scope.row, true)">审核
            </el-button>
            <el-button
              v-else
              size="mini"
              type="text"
              @click="openReviewDialog(scope.row, false)">查看
            </el-button>
            <el-button
              size="mini"
              type="text"
              @click="handleDelete(scope.row)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
<!--分页器-->
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="[ 8, 9, 10]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>

    </el-card>

    <!-- 审核弹窗-->
    <el-dialog title="审核订单" :visible.sync="reviewDialogVisible" width="30%" >
      <el-form :model="reviewForm" status-icon :rules="rules" ref="reviewForm" label-width="100px" class="demo-ruleForm">

        <el-form-item label="订单号" prop="orderId">
          <el-input v-model="reviewForm.orderId" disabled></el-input>
        </el-form-item>
        <el-form-item label="患者姓名" prop="patientName">
          <el-input v-model="reviewForm.patientName" disabled></el-input>
        </el-form-item>

        <el-form-item label="审核人" prop="reviewer">
          <el-input v-model="reviewForm.reviewer" :disabled="!isEditing"></el-input>
        </el-form-item>
        <el-form-item label="退款类型" prop="refundType">
          <el-input v-model="reviewForm.refundType" disabled></el-input>
        </el-form-item>
        <el-form-item label="退款方式" prop="refundMethod">
          <el-input v-model="reviewForm.refundMethod" disabled></el-input>
        </el-form-item>
        <el-form-item label="订单金额" prop="refundAmount">
          <el-input v-model="reviewForm.refundAmount" disabled></el-input>
        </el-form-item>
<!--        <el-form-item label="审核时间" prop="reviewTime">-->
<!--          <el-date-picker-->
<!--            v-model="reviewForm.reviewTime"-->
<!--            type="date"-->
<!--            value-format="yyyy-MM-dd"-->
<!--            placeholder="选择日期时间"-->
<!--            :disabled="!isEditing || !isPendingReview"-->
<!--            :readonly="!isEditing"-->
<!--          ></el-date-picker>-->
<!--        </el-form-item>-->

        <el-form-item label="审核状态" prop="reviewStatus">
          <el-radio-group v-model="reviewForm.reviewStatus" :disabled="!isEditing">
            <el-radio label="已通过" value="已通过">已通过</el-radio>
            <el-radio label="已驳回" value="已驳回">已驳回</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeReviewDialog">取 消</el-button>
        <el-button type="primary" @click="submitReview('reviewForm')" v-if="isEditing">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { getList,deleteOrder,updateReviewStatus } from '@/api/refund_order/refundOrder.js';

export default {
  name: "",
  data() {
    return {
      orderList: [],
      searchForm: {
        patientName: "",
        refundCode: "",
      },
      pageNum: 1,
      pageSize: 10,
      total: 0,
      reviewDialogVisible: false,
      isEditing: false, // 新增属性，用于标记当前是编辑还是查看
      isPendingReview: false, // 新增属性，用于判断是否为待审核状态
      reviewForm: {
        orderId: '',
        patientName: '',
        reviewer: '',
        refundType: '',
        refundMethod: '',
        refundAmount: '',
        reviewTime: '',
        reviewStatus: ''
      },
      rules: {
        reviewer: [
          { required: true, message: '请输入审核人', trigger: 'blur' }
        ],
        reviewStatus: [
          { required: true, message: '请选择审核状态', trigger: 'change' }
        ]
      }
    }
  },
  methods: {

    // 模糊搜索
    search() {
      this.pageNum = 1;
      this.getOrderList();
    },
    // 重置表单
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.getOrderList();
    },
    // 分页
    handleSizeChange(size) {
      this.pageSize = size;
      this.getOrderList();
    },
    // 页码
    handleCurrentChange(currentPage) {
      this.pageNum = currentPage;
      this.getOrderList();
    },
    // 获取单位列表
    getOrderList() {
      getList({
        patientName: this.searchForm.patientName,
        refundCode: this.searchForm.refundCode,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }).then(res => {
        console.log(res);
        // res.data取出的是pageinfo对象，里面包含了分页信息和数据list
        this.orderList = res.data.list;
        this.total = res.data.total;
      });
    },


    // 删除订单
    handleDelete(row) {
      this.$confirm("确认删除该退款订单吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        deleteOrder(row.orderId).then(() => {

          this.$message.success("删除成功");
          this.getOrderList();
        }).catch(() => {
          this.$message.error("删除失败");
        });
      }).catch(() => {
        this.$message.info("已取消删除");
      });
    },

    // 处理用户选择
    // handleSelectionChange(val) {
    //   this.multipleSelection = val;
    //   this.orderId = val.map(item => item.id);
    // },
    exportExcel() {
      this.$confirm("确认导出用户信息吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        window.location.href = "http://localhost:8888/refund/export";
      }).catch(() => {
        this.$message.info("已取消导出");
      });
    },

    // 打开审核对话框
    openReviewDialog(row, isEditing) {
      this.isEditing = isEditing; // 设置当前操作为编辑或查看
      this.reviewForm = Object.assign({}, row); // 深拷贝row对象到reviewForm

      this.isPendingReview = this.reviewForm.reviewStatus === '待审核';

      if (this.isEditing && this.isPendingReview) {
        // 如果是编辑模式且处于待审核状态，清空审核时间以便用户重新输入
        this.reviewForm.reviewTime = ''; // 清空审核时间
      } else if (!this.isEditing) {
        // 如果是查看模式，则保留原始值并设置为只读
        this.$nextTick(() => {
          this.$refs['reviewForm'].clearValidate(); // 清除验证信息
        });
      } else {
        // 如果是编辑模式但不是待审核状态，保持现有审核时间不变
      }

      this.reviewDialogVisible = true;
    },


    // 关闭审核对话框
    closeReviewDialog() {
      this.$refs['reviewForm'].resetFields();
      this.reviewDialogVisible = false;
      this.isEditing = false; // 重置编辑状态
    },


    // 提交审核结果
    submitReview(formName) {
      if (this.isEditing) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            // 在提交审核时，如果是待审核状态，则使用用户选择的时间，否则使用当前时间
            if (this.isPendingReview) {
              // 用户选择了审核时间
            } else {
              // 自动设置审核时间为当前时间
              this.reviewForm.reviewTime = new Date();
            }

            updateReviewStatus(this.reviewForm).then(() => {
              this.$message.success("审核成功");
              this.closeReviewDialog();
              this.getOrderList();
            }).catch(err => {
              this.$message.error("审核失败：" + err.message);
            });
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      }
    },
    // 获取审核状态颜色
    getReviewStatusStyle(status) {
      switch (status) {
        case "待审核":
          return "color: green";
        case "已驳回":
          return "color: red";
        case "已通过":
          return "color: blue";
        default:
          return "";
      }
    },
  },
  created() {
    this.getOrderList();
  }
}
</script>
<style scoped>
.box-card {
  margin-top: 20px;
}
.demo-ruleForm {
  margin-bottom: 20px;
}
.dialog-footer {
  text-align: right;
  padding: 10px 10px 0;
}

</style>
